#{extends 'site.html' /}
#{set title:'New quiz' /}

<h2>New Quiz</h2>

#{if quiz == null }
   <h4>Step 1/2 : Description</h4>
      #{form @Quizzes.storeQuiz()}

		<p class="bloc_line">
			<label for="quizTitle">Title* : </label>
			<input type="text" name="quizTitle"	id="quizTitle" value="${quizTitle}" />
			<span class="error">#{error 'quizTitle' /}</span>
		</p>
		<p class="bloc_line_area">
			<label for="description">Description : </label>
			<textarea name="description" id="description">${description}</textarea>
			<span class="error">#{error 'description' /}</span>
		</p>
		<p class="bloc_line_double">
			<label for="groupType">Type* : </label>
			<select name="groupTypes" size="3" id="groupTypes" multiple="multiple">
				#{list items:models.GroupType.findAll(), as:'type'}
				    <option value="${type.id}" #{if groups && groups.contains(type)}selected="selected"#{/if}>${type.name}</option>
				#{/list}
			</select>
			<span class="error">#{error 'groupTypes' /}</span>
		</p>
      
        <p class="bloc_line">
           <input type="submit" value="Next step" />
        </p>
   
   #{/form}
   
#{/if}
#{elseif quiz != null && quiz.valid }
   <p>Congratulation</p>
   <p>The quiz is finish and correctly created, examiners can use it now for their future exams.</p>
   <p>Thanks for using Lilo quiz</p>
#{/elseif}
#{else}
   <h4>Step 2/2 : Questions</h4>
   #{form @Quizzes.searchQuestions(quiz.id)} 

	#{ifErrors}
	<p class="error">All fields are required!</p>
	#{/ifErrors}
	
	<p class="bloc_line">
		<label for="questionTitle">Title: </label>
		<input type="text" name="questionTitle" id="questionTitle" value="${questionTitle}" />
	</p>
   <p class="bloc_line">
		<label style="float: left;">Min difficulty: </label>
        #{difficulty star:difficulty/}
   </p>
   <p class="bloc_line">
		<label for="second">Min time: </label>
		<input type="text" name="second" id="second" value="${second}" /><span class="info"> (seconds)</span>
   </p>
   <p class="bloc_line">
      <label for="groupType">Type: </label> 
      #{select 'groupType', items:models.GroupType.findAll(true), valueProperty:'id', value:groupType, labelProperty:'name', id:'group_types'/}
     </p>
           
   <p class="bloc_line">
      <input type="submit" value="Search" />
   </p>
  
  #{/form} 
	
<script type="text/javascript">

	function toogleQuestion(questionId){
		var toogleQuestion = #{jsAction @Quizzes.toogleQuestion(quiz.id, ':questionId') /};
		
		$.post(toogleQuestion({questionId:questionId}),null,function(added){
			if(added=='true'){console.log("added");
				$('img#imgAdd_'+questionId).hide();
				$('img#imgRemove_'+questionId).show();
			}else{console.log("removed");
				$('img#imgRemove_'+questionId).hide();
				$('img#imgAdd_'+questionId).show();
			}
		});
	}

</script>
    
<div>
#{form @Quizzes.validateQuiz(quiz.id)} 
	<table>
		<thead>
			<tr>
				<th>&nbsp;</th>
				<th>Title</th>
	            <th>Difficulty</th>
	            <th>Time</th>
	            <th>Type</th>
			</tr>
		</thead>
		<tbody>
		  #{list items:questions, as:'question'}
			<tr>
				<td>
				   <img id="imgAdd_${question.id}" src="@{'/public/images/add.png'}" #{if quiz.questions.contains(question)}style="display: none"#{/if} onclick="toogleQuestion(${question.id});"/>
				   <img id="imgRemove_${question.id}" src="@{'/public/images/remove.png'}" #{if !quiz.questions.contains(question)}style="display: none"#{/if} onclick="toogleQuestion(${question.id});"/>
				</td>
				<td>${question.title}</td>
	            <td>#{difficulty star:question.difficulty, readonly:true, discriminator:question.id /}</td>
	            <td>${question.second}</td>
	            <td>${question.groupType.name}</td>
			</tr>
			#{/list}
			#{else}
			<tr>
			   <td colspan="5" class="no-response">No quiz. Change filter values.</td>
			</tr>
			#{/else}
		</tbody>
	</table>
	
    <p>
        <input type="submit" value="Create" />
    </p>
    
#{/form}
</div>
#{/else}






 

